<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Toast 轻提示"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-button
        type="primary"
        block
        @click.native="openToast"
      >
        点击弹出 Toast
      </hips-button>
    </demo-block>
    <demo-block title="插入icon">
      <hips-button
        type="primary"
        block
        @click.native="openToastWithIcon"
      >
        点击弹出带有 icon 的 Toast
      </hips-button>
    </demo-block>
    <demo-block title="自定义位置">
      <hips-button
        type="primary"
        block
        @click.native="openBottomToast"
      >
        自定义 Toast 位置
      </hips-button>
    </demo-block>
    <demo-block title="手动关闭">
      <hips-button
        type="warning"
        block
        @click.native="openHideToast"
      >
        可关闭 Toast
      </hips-button>
    </demo-block>
    <demo-block title="新实例创建">
      <hips-button
        type="warning"
        block
        @click.native="openNewToast"
      >
        每次以新实例创建 Toast
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button} from '@hips/vue-ui';

export default {
  components: {    
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  methods: {
    openToast () {
      this.$hips.toast('notice message')
    },
    openToastWithIcon () {
      this.$hips.toast({
        message: 'operation success',
        icon: 'success',
      })
    },
    openBottomToast () {
      this.$hips.toast({
        message: 'custom location message',
        position: 'bottom',
      })
    },
    openHideToast () {
      let toast = this.$hips.toast({
        message: 'closable message',
        position: 'top',
        duration: 9000,
      })
      setTimeout(() => {
        toast.close()
      }, 2000)
    },
    openNewToast () {
      this.$hips.toast.allowMultiple()
      this.$hips.toast({
        message: 'new instance',
      })
    },

  },
}
</script>